<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>琴墨教育 {:lang('ADMIN_CENTER')}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="robots" content="noindex,nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@__ELEMENT_VERSION__/lib/theme-chalk/index.css">
    <!-- VUE -->
    <script src="https://cdn.jsdelivr.net/npm/vue@__VUE_VERSION__/dist/vue.js"></script>
    <!-- element组件库 -->
    <script src="https://unpkg.com/element-ui@__ELEMENT_VERSION__/lib/index.js"></script>
    <script src="https://unpkg.com/axios@__AXIOS_VERSION__/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :lg="{span: 6, offset: 9}" :md="{span: 8, offset: 8}" :sm="{span: 10, offset: 7}">
            <el-card v-loading="onlogin">
                <h1 class="text-center">琴墨教育 {:lang('ADMIN_CENTER')}</h1>
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="{:lang('USERNAME_OR_EMAIL')}"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="{:lang('PASSWORD')}" type="password"></el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" class="captcha">
                        <el-input v-model="form.captcha" placeholder="验证码" maxlength="4">
                            <template slot="suffix">
                                <img :src="captcha" @click="refreshCaptcha()" title="换一张">
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="login-btn" @click="dologin()">{:lang('LOGIN')}</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</div>
</body>
<style>
body {
    height: auto;
    background: url(/static/images/login-background.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: rgba(255,255,255,.95);
}
#app {
    padding-top: 10%;
}
.captcha img {
    margin-top: 1px;
    cursor: pointer;
}
.login-btn {
    width: 100%;
}
</style>
<script>
var app = new Vue({
    el: '#app',
    created() {
        this.refreshCaptcha();
    },
    data() {
        return {
            form: {
                username: '{:cookie(\'admin_username\')}',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码至少需要 6 位', trigger: 'blur' }
                ],
                captcha: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            captcha: '',
            onlogin: false
        };
    },
    methods: {
        refreshCaptcha() {
            this.captcha = '/captcha/new.html?height=38&width=150&font_size=18&amp;time=' + Math.random();
        },
        dologin() {
            let _this = this;
            console.log(_this.form);
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    _this.onlogin = true;
                    axios.post('/admin/public/dologin.html', {
                        username: _this.form.username,
                        password: _this.form.password,
                        captcha: _this.form.captcha
                    }, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                        }
                    }).then(function (response) {
                        _this.onlogin = false;
                        if (response.data.code === 1) {
                            window.location.href = response.data.url;
                        } else {
                            _this.refreshCaptcha();
                            _this.$message({
                                message: response.data.msg,
                                type: 'warning'
                            });
                        }
                    }).catch(function (error) {
                        _this.onlogin = false;
                        _this.$message.error(error.toString())
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
});
</script>
</html>
